<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>bigyiの笔记本</title>
</head>
<style>
body {
    margin: 0px;
}

#headerimg {
    width: 100%;
    height: 200px;
    background-color: #18E1EC;
    position: relative;
}

#headernav {
    width: 100%;
    height: 70px;
    background-color: #E04AEB;
    position: absolute;
    bottom: 0;
}

#contxt {
    display: box;
    display: -moz-box;
    display: -webkit-box;
    background-color: #F4EA2F;
    width: 100%;
    height: 1000px;
    margin-top: 30px;
}

#asidenav {
    width: 200px;
    margin-right: 10px;
    background-color: #4300FF
}

#main {
    width:60%;
    min-width: 500px;
    margin-left: 10px;
    margin-right: 10px;
    background-color: #48EA97;
    /*浅绿*/
    display: -webkit-box;
    display: -moz-box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-box-align: center;
    -moz-box-align: center;
}

#aside {
    width:150px;
    margin-left: 10px;
    background-color: #EE9440;
    /*浅蓝*/
}

#rightkongbai {
    background-color: white;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
}

.article {
    -moz-display:box;
    width:90%;
    margin:2px;
    background-color: #fff;
    height: 300px;
}


/*用-webkit-box-ordinal-group:数字（1最前）来ordinal。*/

.mainflex {
    width: 90%;
    margin: 2px auto;
    background-color: #fff;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
}

#mainfooter {
    width: 90%;
    height: 20px;
    margin: 1px auto;
    background-color: #ddd;
}

#aside,
#main,
#asidenav,
#rightkongbai {
    box-sizing: border-box;
}
</style>

<body>
    <header id="headerimg">
        <nav id="headernav"></nav>
    </header>
    <div id="contxt">
        <nav id="asidenav"></nav>
        <div id="main">
            <article class="article">11</article>
            <article class="article">22</article>
            <article class="article">33</article>
            <article class="mainflex article">42</article>
            <footer id="mainfooter"> 更多阅读 ，下一篇文章</footer>
        </div>
        <aside id="aside"></aside>
        <div id="rightkongbai"></div>
    </div>
    <footer id="footer"></footer>
    
</body>

</html>
